
import {  SearchBar, Button } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from 'react';

function Index() {
  const nav = useNavigate();
  const [searchValue, setSearchValue] = useState('');
  const [ setSelectedCategory] = useState('外科');
  const [departmentList, setDepartmentList] = useState<any[]>([]);

  type DepartmentCategory = {
    id: string;
    name: string;
    isSelected: boolean;
  }

  type Department = {
    id: string;
    name: string;
    category: string;
  }

  const handleBack = () => {
    nav(-1);
  };

  const handleSwitchCampus = () => {
    console.log('切换院区');
  };

  const handleSmartService = () => {
    console.log('智能客服咨询');
    nav('/AI');
  };

  const handleSearch = (value: string) => {
    setSearchValue(value);
    // 这里可以添加搜索逻辑
    filterDepartments(value);
  };

  const handleCategorySelect = (category: string) => {
    setSelectedCategory(category);
    filterDepartmentsByCategory(category);
    
  };

  const filterDepartments = (searchTerm: string) => {
    // 根据搜索词过滤科室
    console.log('搜索科室:', searchTerm);
  };

  const filterDepartmentsByCategory = (category: string) => {
    // 根据分类过滤科室
    console.log('选择分类:', category);
  };

  const handleDepartmentSelect = (department: Department) => {
    console.log('选择科室:', department);
    nav(`/list?department=${encodeURIComponent(department.name)}`);
  };

  useEffect(() => {
    // 模拟获取科室数据
    const mockCategories: DepartmentCategory[] = [
      { id: '1', name: '外科', isSelected: true },
      { id: '2', name: '内科', isSelected: false },
      { id: '3', name: '全科门诊', isSelected: false },
      { id: '4', name: '口腔科', isSelected: false },
      { id: '5', name: '耳鼻喉科', isSelected: false },
      { id: '6', name: '皮肤科', isSelected: false },
      { id: '7', name: '妇产科', isSelected: false },
      { id: '8', name: '骨科', isSelected: false },
      { id: '9', name: '儿科', isSelected: false }
    ];

    const mockDepartments: Department[] = [
      { id: '1', name: '中医外科门诊', category: '外科' },
      { id: '2', name: '门诊外一科', category: '外科' },
      { id: '3', name: '门诊外二科', category: '外科' },
      { id: '4', name: '门诊外三科', category: '外科' },
      { id: '5', name: '门诊外四科', category: '外科' },
      { id: '6', name: '神经外科', category: '外科' }
    ];

    setDepartmentList(mockDepartments);
  }, []);

  return (
    <div style={{ width: '100vw', minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航栏 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '12px 16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div 
            onClick={handleBack}
            style={{ 
              fontSize: '20px', 
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ‹
          </div>
          <div style={{ fontSize: '18px', fontWeight: 600, color: '#333' }}>
            科室列表
          </div>
        </div>
  
      </div>

      {/* 医院信息区域 */}
      <div style={{
        background: '#e6f7ff',
        padding: '16px',
        display: 'flex',
        alignItems: 'center',
        gap: '12px'
      }}>
        <div style={{ fontSize: '20px', color: '#1677ff' }}>
          🏥
        </div>
        <div style={{ flex: 1 }}>
          <div style={{
            fontSize: '16px',
            fontWeight: 600,
            color: '#333',
            marginBottom: '4px'
          }}>
            四川省保健院南苑
          </div>
          <div style={{
            fontSize: '14px',
            color: '#666'
          }}>
            四川省成都市锦江区画溪路666号
          </div>
        </div>
        <div 
          onClick={handleSwitchCampus}
          style={{
            fontSize: '14px',
            color: '#1677ff',
            cursor: 'pointer',
            display: 'flex',
            alignItems: 'center',
            gap: '4px'
          }}
        >
          切换院区
          <span style={{ fontSize: '12px' }}>›</span>
        </div>
      </div>

      {/* 智能客服区域 */}
      <div style={{
        background: '#f5f5f5',
        padding: '12px 16px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }}>
        <div style={{
          fontSize: '14px',
          color: '#666'
        }}>
          不知道挂什么科,问问智能客服?
        </div>
        <Button
          size="small"
          color="primary"
          onClick={handleSmartService}
          style={{
            borderRadius: '16px',
            padding: '4px 12px',
            fontSize: '12px'
          }}
        >
          去咨询
        </Button>
      </div>

      {/* 搜索框 */}
      <div style={{ padding: '12px 16px', background: '#fff' }}>
        <SearchBar
          placeholder="可输入科室名称检索"
          value={searchValue}
          onChange={setSearchValue}
          onSearch={handleSearch}
          style={{ '--background': '#f5f5f5' }}
        />
      </div>

      {/* 科室列表 - 双列表布局 */}
      <div style={{ 
        display: 'flex', 
        height: 'calc(100vh - 280px)',
        background: '#fff'
      }}>
        {/* 左侧主分类列表 */}
        <div style={{
          width: '120px',
          background: '#f8f9fa',
          borderRight: '1px solid #f0f0f0'
        }}>
          {[
            { id: '1', name: '外科', isSelected: true },
            { id: '2', name: '内科', isSelected: false },
            { id: '3', name: '全科门诊', isSelected: false },
            { id: '4', name: '口腔科', isSelected: false },
            { id: '5', name: '耳鼻喉科', isSelected: false },
            { id: '6', name: '皮肤科', isSelected: false },
            { id: '7', name: '妇产科', isSelected: false },
            { id: '8', name: '骨科', isSelected: false },
            { id: '9', name: '儿科', isSelected: false }
          ].map((category) => (
            <div
              key={category.id}
              onClick={() => handleCategorySelect(category.name)}
              style={{
                padding: '16px 12px',
                fontSize: '14px',
                color: category.isSelected ? '#1677ff' : '#333',
                background: category.isSelected ? '#fff' : 'transparent',
                borderLeft: category.isSelected ? '3px solid #1677ff' : '3px solid transparent',
                cursor: 'pointer',
                borderBottom: '1px solid #f0f0f0'
              }}
            >
              {category.name}
            </div>
          ))}
        </div>

        {/* 右侧子科室列表 */}
        <div style={{ flex: 1, overflowY: 'auto' }}>
          {departmentList.map((department) => (
            <div
              key={department.id}
              
              onClick={() => handleDepartmentSelect(department)}
              style={{
                padding: '16px',
                fontSize: '14px',
                color: '#333',
                borderBottom: '1px solid #f0f0f0',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between'
              }}
            >
              <span>{department.name}</span>
      
              <span style={{ fontSize: '12px', color: '#999' }}>›</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Index;
